<template>
  <div class="all">
    <div class="felx">
      <div class="avt">
        <img src="http://img.shibangszkj.top/shibang/16994991147765.png" />
      </div>
      <div>
        <div class="name">
          两只老虎跑得…
        </div>
        <div class="share" v-if="data.data.length > 0 && data.data[0].isShow">
          <el-rate v-model="value1"></el-rate>
        </div>
        <div class="jieshao" v-if="data.data.length > 0 && data.data[2].isShow">
          商家介绍：一家10年老店
        </div>
      </div>
    </div>
    <div class="right" v-if="data.data.length > 0 && data.data[1].isShow">
      <el-button type="danger" size="mini" round>关注店铺</el-button>
    </div>
    <!-- <div class="flex" style="margin-top:20px"> -->
    <!-- <div style="" v-for="(item, index) in newA" :key="index">
        <div class="num">8</div>
        <div class="t">{{ item.name }}</div>
      </div> -->
    <!-- <div>
                 <div class="num">8</div>
                <div class="t">关注店铺</div>
            </div>
             <div>
                 <div class="num">8</div>
                <div class="t">我的足迹</div>
            </div> -->
    <!-- </div> -->
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
export default {
  name: "Images",
  components: {
    vuedraggable
  },
  props: {
    data: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      list: {},
      url: "",
      index: null,
      show: false,
      imageIndex: null,
      link: "",
      height_px: '',
      banner_height: '300',
      newA: [],
      value1: 5,
    };
  },
  computed: {


  },
  watch: {
    data: {
      handler(newData, oldData) {
        // 检查 tabType 是否发生了变化
        console.log(this.data, "222222")
        // this.getdata()
      },
      // 开启深度监听
      deep: true
    },
  },
  mounted() {
    // this.getdata()
  },
  methods: {
    getdata() {
      // this.list = this.data;
      let newA = []
      newA = this.data.data.filter((item, index) => {
        return item.isShow == true
      })
      this.newA = newA;
    }
  },
};
</script>

<style lang="scss" scoped>
.num {
  text-align: center;
  font-size: 20px;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  color: #333333;
}

.t {
  text-align: center;
  font-size: 11px;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  text-align: left;
  color: #999999;
}

.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;

}

.name {
  font-size: 20px;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  text-align: left;
  color: #333333;
  letter-spacing: 0.01px;
}

.share {
  padding: 5px 10px;
  // background: #1c1b19;
  border-radius: 9px;
  font-size: 11px;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  text-align: left;
  color: #c2c2c2;
  margin-top: 5px;
}

.jieshao {
  font-size: 12px;
  color: #999999;
}

.felx {
  display: flex;
  align-items: center;
}

.all {
  width: 378px;
  height: 142px;
  background-color: transparent;
  margin: 0 auto;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avt {
  width: 62px;
  height: 62px;
  background: #ffffff;
  border-radius: 50%;
  margin-right: 10px;

  img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
  }
}
</style>
